<template>
    <div>
      <Header :position="positionTitle"></Header>
      <div style="display: flex;flex-flow: column">
      <div style="display: flex;margin-bottom:10px;height: 360px;">
      <el-card style="margin-right: 10px;height: 100%">
        <div slot="header"
             style="font-size: 20px;font-weight: bolder;text-align: left">
          <span>诊断报告详情</span>
        </div>
<!--        <h2 slot="header">数据总览</h2>-->
        <div style="display: flex; width: 100%; text-align: left;;margin-top: 50px">
        <div style="width: 200px; padding: 20px">
          <h3>诊断报告数</h3>
          <h1 style="color: #5470c6;font-size: 100px;">{{diagnosticNum}}</h1>
        </div>
        <div style="width: 200px; padding: 20px">
          <h3>预测报告数</h3>
          <h1 style="color: #91cc75;font-size: 100px;">{{forecastNum}}</h1>
        </div>
        <div style="width: 200px; padding: 20px">
          <h3>诊断模型报告数</h3>
          <h1 style="color: #fac858;font-size: 100px;">{{diagnosticModelNum}}</h1>
        </div>
      </div>
        </el-card>
<!--        <el-card style="height: 500px;">-->
        <el-card style="width:70%;height: 100%">
          <div slot="header"
               style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>诊断报告数量统计</span></div>
          <div id="annual" style="width: 100%;margin-left: 50px;height: 250px"></div>
        </el-card>
      </div>
        <el-card>
        <div style="display: flex; justify-content:  flex-end; padding: 10px">
            <div>
              <el-autocomplete
                placeholder="请输入关键字进行搜索"
                :trigger-on-focus="false"
                :fetch-suggestions="querySearch"
                size="medium"
                v-model="studentKeyword"
                clearable
              >
                <el-button slot="append" icon="el-icon-search" @click="choosePerson"></el-button>
              </el-autocomplete>
            </div>
        </div>
        <el-table
          @expand-change="shutData"
          :data="tableData"
          height="365"
          border
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-card style="width: 100%;text-align: left">
                <div slot="header"
                     style="font-size: 20px;font-weight: bolder;text-align: left">
                  <span>诊断结果预览</span>
                </div>
                <div style="display: flex;flex-flow: column;width: 100%">
                  <div style="display: flex;width: 100%">
                    <el-card style="width: 30%;margin-right: 10px" shadow="never">
                      <div style="height: 100%;margin-top: 20px">
                        <div style="font-weight: bold;display: flex;width: 100%;
                             justify-content:center; align-items:center;;flex-flow: column;height: 100%">
                          <div style="font-size: 70px;color: red">A</div>
                          <div>危险系数</div></div>
                      </div>
                    </el-card>
                    <el-card style="width: 70%" shadow="never">
                      <div style="margin-bottom: 20px;margin-left: 20%"><span style="font-size: 20px;
                             font-weight: bolder;text-align: right;
                            display: inline-block;width: 30%">诊断结果</span>
                        <span style="text-align: center;display: inline-block;width: 70%">{{props.row.result}}</span> </div>
                      <div style="margin-bottom: 20px;margin-left: 20%"><span style="font-size: 20px;font-weight: bolder;text-align: right;
                        display: inline-block;width: 30%">用时</span>
                        <span style="text-align: center;display: inline-block;width: 70%">{{props.row.time}}</span>
                      </div>
                      <div style="margin-bottom: 20px;margin-left: 20%"><span style="font-size: 20px;font-weight: bolder;text-align: right;
                        display: inline-block;width: 30%">算法模板</span>
                        <span style="text-align: center;display: inline-block;width: 70%">{{props.row.AlgorithmTemplate}}</span>
                      </div>
                    </el-card>
                  </div>
                  <div style="display: flex;width: 100%;margin-top: 10px;">
                    <el-card style="width: 50%;margin-right: 10px;overflow-y: auto" shadow="never">
                      <div><span style="font-size: 18px;font-weight: bolder;display: inline-block;">
                                  <span style="font-size: 25px">详细信息</span>
                        <!--                                  ;display: flex; align-items: center;-->
                                <el-input autosize  type="textarea"
                                          style="overflow-y:auto; text-align: left;
                                            margin-left: 50px;margin-right: 50px;margin-top: 10px;
                                            letter-spacing:1px;" v-model="props.row.content"></el-input></span></div>
                      <!--                              <el-divider></el-divider>-->
                      <!--                              <div style="text-align: center;margin-top: 10%">-->
                      <!--                                  <el-button type="primary" size="medium">下载</el-button>-->
                      <!--                              </div>-->
                    </el-card>
                    <el-card style="width: 50%;overflow-y: auto" shadow="never">
                      <div><span style="font-size: 18px;font-weight: bolder;display: inline-block;">
                                  <span style="font-size: 25px">建议方案</span>
                                <div style="overflow-y:auto;margin-top: 10px;
                                            margin-left: 50px;margin-right: 50px;
                                            text-align: left">{{props.row.propse}}</div></span></div>
                    </el-card>
                  </div>
                  <div style="margin-top: 10px;text-align: center">
                    <el-button type="primary" size="medium" style="margin-right: 10px" @click="DownLoadData">下载</el-button>
                    <el-button type="primary" size="medium" @click="updateData">保存</el-button>
                  </div>

                </div>
              </el-card>
<!--              <el-form label-position="left" inline class="demo-table-expand">-->
<!--                <el-form-item label="报告内容">-->
<!--                  <el-input v-model="props.row.content" type="textarea"></el-input>-->
<!--                  <el-button size="mini" type="danger">-->
<!--                    取消-->
<!--                  </el-button>-->
<!--                  <el-button size="mini" type="primary">-->
<!--                    保存-->
<!--                  </el-button>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--              <div style="float: right;margin-top: 10px;">-->
<!--                <el-button type="primary">保存</el-button>-->
<!--              </div>-->
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="报告名"
            prop="name">
          </el-table-column>
          <el-table-column
            align="center"
            prop="type">
            <template  slot="header" >
              <el-select v-model="positionSelect" placeholder="报告类型" size="mini">
                <el-option v-for="item in positionSelectData" :key="item" size="mini"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          > <template>
            <el-button
              size="mini" type="primary">下载</el-button>
            <el-button
              size="mini"
              type="danger"
             >删除</el-button>
          </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="20"
            style="display: inline-block"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-card>
      </div>
    </div>
</template>

<script>
  import Header from "../Header";
  import * as echarts from 'echarts'
    export default {
        name: "ReportCard",
      components:{
          Header
      },
      data(){
          return{
            diagnosticNum:100,
            forecastNum:200,
            diagnosticModelNum:10,
            tableData: [{
              name: '轴承发热',
              type:'诊断报告',
              content:'轴承发热或响声不正常。润滑脂过多或不足， 轴承磨损烧坏， 润滑脂变质或\n' +
                '含有异物，轴承内外圈松动',
              propse:'在发电机运行过程，由于名方面的原因产生名种故暲.无论其故障大小，' +
                      '都要采用有效措施消除，并在故暲处理前切断组电源一面引发安全事故',
              result:'危险系数高',
              time:'1秒',
              AlgorithmTemplate:'决策树'
            }, {
              name: '轴承漏油',
              type:'诊断报告',
              content:'轴承漏油， 发生原因和润潜脂稀化轴承发热， 密封件间随过大或损坏， 润滑\n' +
                '脂多等相关',
              propse:'清除和补充润滑油，清洗和更换轴承等',
              result:'危险系数高',
              time:'10秒',
              AlgorithmTemplate:'卷积随机网络'
            }, {
              name: '通用轴承',
              type:'诊断报告',
              content:'发电机失磁。该故障发生后，会降低系统电压和定子电压，升高定子电流',
              propse:'检查轴承表明和密封性确认是否发生故障,发现请及时修补',
              result:'危险系数高',
              time:'20秒',
              AlgorithmTemplate:'线性回归'
            }, {
              name: '通讯故障',
              type:'诊断报告',
              content:'发电机着火。发电机周国有焦味， 端部空冷室有火光， 發电机差动、 接地等\n' +
                '保护可能动作，定子铁芯温度升高，表针摆动。',
              propse:'检查通讯设备是否发生问题，有问题就及时更换',
              result:'危险系数高',
              time:'30秒',
              AlgorithmTemplate:'时间序列模型'
            }],
            positionSelect:'',
            positionSelectData:[{name:'诊断报告',value:1}],
            positionTitle:{
              secondTitle:'故障信息' ,
              thirdTitle:'报告管理'
            },
            annualData:{
              xData:['18:53', '18:54', '18:55', '18:56', '18:57', '18:58', '18:59'],
              value1: [120, 132, 101, 134, 90, 230, 210],
              value2:[220, 182, 191, 234, 290, 330, 310],
              value3:[150, 232, 201, 154, 190, 330, 210],
            }
          }
      },
      mounted () {
          this.drawAnnualPie()
      },
      methods:{
        shutData(row,expanded){
            if(expanded.length===0){
              this.$message.info('保存成功')
              // alert(1)
            }
          },
        drawAnnualPie(){
          let option= {
            legend: {
              data: ['诊断报告数','预测报告数','预测模型报告数']
            },

            tooltip : {
              trigger: 'axis'
            },
            xAxis: [{
              type: 'category',
              data: this.annualData.xData,
              name: "时", //坐标名字
              boundaryGap : false,
              // nameLocation: "end",//坐标位置，支持start,end，middle
              // nameTextStyle: {//字体样
              //   padding: -10 //距离坐标位置的距离
              // }
            }],
            grid: {
              x: 30,
              // y:30,
              // x2: 30,
              y2:30,
            },
            yAxis: [{
              type: 'value',
              name: "数量", //坐标名字
              // nameLocation: "end",//坐标位置，支持start,end，middle
              // nameTextStyle: {//字体样式
              //
              //   padding: -10 //距离坐标位置的距离
              //
              // }
            }],
            series: [{
              name: '诊断报告数',
              type: 'line',
              data: this.annualData.value1
            },
              {
                name: '预测报告数',
                type: 'line',
                data: this.annualData.value2
              },
              {
                name: '预测模型报告数',
                type: 'line',
                data: this.annualData.value3
              },]
          };
          let myChart = echarts.init(document.getElementById('annual'));
          myChart.setOption(option);
        },
      }
    }
</script>

<style scoped>

</style>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
